<template>
  <a-sub-menu
    :key="menuInfo.path"
    v-bind="$props"
    v-on="$listeners">
    <span slot="title">
      <a-icon v-if="menuInfo.picUrl" :type="menuInfo.picUrl" />
      <span>{{ menuInfo.meta.title }}</span>
    </span>
    <template v-for="item in menuInfo.children">
      <template>
        <sub-menus
          :index="index + 1"
          :pathKeys="pathKeys"
          v-if="item.children && item.children.filter(e => {return e.hidden != 1}).length"
          :key="item.path"
          :keys="item.path"
          :menu-info="item" />
        <a-menu-item @click="subMenuClick(item, item.path)" v-else-if="item.hidden!=1" :key="item.path">
          <span>{{ item.meta.title }}</span>
        </a-menu-item>
      </template>
    </template>
  </a-sub-menu>
</template>

<script>
import { mixin } from './assets/mixin';
import { Menu } from 'ant-design-vue';

export default {
  name: 'SubMenus',
  mixins: [mixin],
  isSubMenu: true,
  props: {
    ...Menu.SubMenu.props,
    // Cannot overlap with properties within Menu.SubMenu.props
    menuInfo: {
      type: Object,
      default: () => ({})
    },
    keys: {
      type: [String, Number],
      default: ''
    },
    index: {
      type: [String, Number],
      default: '1'
    },
    pathKeys: {
      type: Array,
      default: () => ([])
    }
  }
};
</script>

<style lang="less">
@import url('./assets/index.less');
</style>
